<template>
  <div class="">
    <!-- <head-nav></head-nav> -->
    <div class="contantbox" :style="bgobj">
      <div class="imgzanwei">

      </div>
      <div class="djs">
        <p>{{tpdjs}}</p>
      </div>
      <!-- 报名人数 -->
      <div class="bmrs">
        <ul>
          <li>
            <p>报名人数</p>
            <p>{{resobj.partCount}}</p>
          </li>
          <li>
            <p>累积投票</p>
            <p>{{resobj.voteSum}}</p>
          </li>
        </ul>
      </div>
      <!-- 搜索 -->
      <div class="search">
        <input v-model="keyword" type="text" placeholder="请输入编号或者名称">
        <i @click="searchfn" class="iconfont icon-sousuo"></i>
      </div>
      <!-- 列表 -->
      <div class="contantlist">
        <!-- tab-container -->
        <!-- <mt-tab-container v-model="navselected">
                    <mt-tab-container-item id="1">
                        asdfafasdfasdfasdf
                    </mt-tab-container-item>
                    <mt-tab-container-item id="2">
                        2222222
                    </mt-tab-container-item>
                    <mt-tab-container-item id="3">
                        333333333
                    </mt-tab-container-item>
                </mt-tab-container> -->
        <div class="nav">
          <!-- 动态导航 -->
          <mt-navbar v-model="navselected">
            <!-- {{pxxs}} -->

            <mt-tab-item :id="item" v-for="(item,index) in pxxs" :key="index">

              <p class="navbaricon" @click="getlistdata(item)"><i :class="item.iconfont"></i>{{bmlist[item-1].title}}</p>
              <!-- {{this.bmlist[index].title}} -->
            </mt-tab-item>
            <!-- <mt-tab-item id="2">
              <p class="navbaricon" @click="getlistdata(2)"><i class="iconfont icon-paihangbang"></i>人气排行</p>
            </mt-tab-item>
            <mt-tab-item id="3">
              <p class="navbaricon" @click="getlistdata(3)"><i class="iconfont icon-shunxu"></i>参赛顺序</p>
            </mt-tab-item> -->
          </mt-navbar>
          <!-- <ul>
              <li>
                  <p><i class="iconfont icon-jia"></i></p>
                  <p>最新参赛</p>
              </li>
              <li>
                  <p><i class="iconfont icon-jia"></i></p>
                  <p>最新参赛</p>
              </li>
              <li>
                  <p><i class="iconfont icon-jia"></i></p>
                  <p>最新参赛</p>
              </li>
          </ul> -->
        </div>
        <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
          <div class="list">
            <div class="item" v-for="(item,index) in listdata" :key="index">
              <p class="bh">{{item.BH}}号</p>
              <p v-if="item.ZP.length!=0" class="tp" @click="goarticle(item.ID)" :style="{backgroundImage:'url('+item.ZP[0].IMG+')'}">
              </p>
              <p v-else class="tp" @click="goarticle(item.ID)">
                <img src="../../assets/img/photo-cutpicsdef.jpg" alt="">
              </p>
              <p class="bt">
                {{item.CSMC}}
              </p>
              <p class="ps">
                {{item.TPS}}票
              </p>
              <p @click="toupiaofn(item.ID,item)">
                <img src="../../assets/img/photo-tpbutton.png" alt="">

              </p>
            </div>

          </div>
          <div class="loading">
            <div v-if="loading">
              加载中...
            </div>
            <div v-else>
              没有数据了
            </div>
          </div>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api/api";
import { MessageBox, Toast, Navbar, TabItem, InfiniteScroll } from "mint-ui";
import { log } from "util";
export default {
  data() {
    return {
      resobj:{},
      navselected: "1",
      bgimg: "",
      tpdjs: "",
      timer: null,
      listdata: [],
      loading: true,
      row: 10,
      page: 1,
      type: 1,
      nextapi: true,
      keyword: "",
      pxxs: [],
      openid: "",
      bmlist: [
        {
          title: "最新参赛",
          iconfont: "iconfont icon-shijian",
          type: "1"
        },
        {
          title: "人气排行",
          iconfont: "iconfont icon-paihangbang",
          type: "2"
        },
        {
          title: "参赛顺序",
          iconfont: "iconfont icon-shunxu",
          type: "3"
        }
      ]
    };
  },
  computed: {
    bgobj() {
      return {
        backgroundImage: "url(" + this.bgimg + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100%"
      };
    }
  },
  methods: {
    //搜索
    searchfn() {
      let that = this;
      let type = this.type;
      let row = 1000;
      let page = 1;
      let search = this.keyword;
      let hdId = this.resobj.ID;
      that.listdata = [];
      that.getlist(that, type, row, page, search, hdId);
    },
    //加载更多...
    loadMore() {
      let that = this;
      console.log("到底触发");
      that.page = that.page + 1;
      let type = this.type;
      let row = this.row;
      let page = this.page;
      let search = this.keyword;
      let hdId = this.resobj.ID;
      if (this.nextapi) {
        this.loading = true;
        that.getlist(that, type, row, page, search, hdId);
      }
    },
    //全局设置数据请求
    getqjset(that, userid) {
      api.getActiveIndex(that, userid, function(res) {
        let data = res.data;
        console.log(data, "晒照片全局设置");
        if (data.code == 0) {
          // 微信分享
          wx.ready(function() {
            // 分享圈
            // wx.onMenuShareTimeline({
            // 	title: '乐宾百货',
            // 	link: '',
            // 	imgUrl: '../../assets/img/photo-photo1.pmg',
            // 	success: function() {
            // 		// 用户确认分享后执行的回调函数
            // 		console.log('分享到朋友圈成功');
            // 	},
            // 	cancel: function() {
            // 		// 用户取消分享后执行的回调函数
            // 		alert('您没有分享到朋友圈');
            // 	}
            // });
            // 分享人
            wx.onMenuShareAppMessage({
              title: that.resobj.FXBT,
              desc: that.resobj.FXNR,
              link: "",
              imgUrl: "../../assets/img/photo-photo1.pmg",
              type: "", // 分享类型,music、video或link，不填默认为link
              dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
              success: function(res) {
                console.log("分享成功");
              },
              cancel: function(res) {
                alert("您没有分享");
              },
              fail: function(res) {
                alert(JSON.stringify(res));
              }
            });
          });
          if (data.data.BJT.length != 0) {
            let zplist = data.data.BJT;
            for (let k = 0; k < zplist.length; k++) {
              zplist[k].IMG = that.host.filehost + zplist[k].ID;
            }
            that.bgimg = data.data.BJT[0].IMG;
          }

          console.log(data.data.PXGZ, "data.data.PXGZ");
          that.pxxs = data.data.PXGZ.split("|");
          that.navselected = that.pxxs[0]; //设置选中状态
          that.type = that.pxxs[0]; //列表的类型
          that.resobj = data.data;
          // 获取列表
          let type = that.type;
          let row = that.row;
          let page = that.page;
          let search = "";
          let hdId = that.resobj.ID;

          that.getlist(that, type, row, page, search, hdId);
          that.newdjsfn();
        } else {
          that.Toastfn(data.msg, 2000, "");
        }
      });
    },
    // 倒计时
    newdjsfn() {
      let that = this;
      let nowtime = Date.parse(new Date());
      var kstime = Date.parse(new Date(this.resobj.BMKSSJ.replace(/-/g,'/')));
      var jstime = Date.parse(new Date(this.resobj.BMJSSJ.replace(/-/g,'/')));
      console.log(nowtime, kstime, jstime);

      if (nowtime < kstime) {
        that.tpdjs = "活动还未开始";
      } else if (nowtime > jstime) {
        that.tpdjs = "活动已经结束";
      } else {
        // console.log("活动运行中");
        countDown((jstime - nowtime) / 1000);
      }
      // 投票倒计时
      function countDown(times) {
        var sytime = "";
        djsdm();
        that.timer = setInterval(function() {
          djsdm();
        }, 1000);

        function djsdm() {
          var day = 0,
            hour = 0,
            minute = 0,
            second = 0; //时间默认值
          if (times > 0) {
            day = Math.floor(times / (60 * 60 * 24));
            hour = Math.floor(times / (60 * 60)) - day * 24;
            minute = Math.floor(times / 60) - day * 24 * 60 - hour * 60;
            second =
              Math.floor(times) -
              day * 24 * 60 * 60 -
              hour * 60 * 60 -
              minute * 60;
          }
          // if (day <= 9) day = "0" + day;
          // if (hour <= 9) hour = "0" + hour;
          // if (minute <= 9) minute = "0" + minute;
          if (second <= 9) second = "0" + second;
          sytime = day + "天" + hour + "小时" + minute + "分钟" + second + "秒";
          that.tpdjs = "活动倒计时：" + sytime;
          // console.log(sytime);
          // console.log("剩余时间s：" + times);
          if (times < 0) {
            clearInterval(that.timer);
            that.tpdjs = "活动已经结束";
          }
          times--;
        }
      }
    },
    // 去详情
    goarticle(id) {
      let that = this;
      if (!this.$util.checkValidity()) {
        return
      }
      this.$router.push("article/" + id);
    },
    // 获取列表
    getlistdata(type) {
      let that = this;
      let row = this.row;
      // let page = this.page;
      let search = "";
      let hdId = this.resobj.ID;
      this.keyword = "";
      this.type = type; //点击是重置类型
      this.page = 1; //点击是重置页码
      this.listdata = []; //点击时候重置列表
      this.nextapi = true; //可以请求数据
      this.navselected = type; //更改选中颜色状态
      that.getlist(that, type, row, this.page, search, hdId);
    },
    // 投票
    toupiaofn(voteId,item) {
      //   this.$router.push("/joinus");
      let that = this;
      let openid = this.openid;
      if (!this.$util.checkValidity()) {
        return
      }
      api.photoVote(that, openid, voteId, function(res) {
        let data = res.data;
        console.log(data, "晒照片-投票");
        if (data.code == 0) {
          let data1 = JSON.parse(data.data);
          if (data1.code == 0) {
            item.TPS++;
            that.resobj.voteSum++;
            MessageBox({
              title: "提示",
              message: "恭喜您投票成功",
              showCancelButton: false
            });
          } else {
            MessageBox({
              title: "提示",
              message: data1.msg,
              showCancelButton: false
            });
          }
        } else {
          that.Toastfn(data.msg, 2000, "");
        }
      });
    },
    // 获取列表
    getlist(that, type, row, page, search, hdId) {
      api.getPhotoList(that, type, row, page, search, hdId, function(res) {
        let data = res.data;
        console.log(data, "晒照片-列表");
        if (data.code == 0) {
          if (data.data.length != 0) {
            //有数据
            // 处理图片
            for (let i = 0; i < data.data.length; i++) {
              let zplist = data.data[i].ZP;
              if (zplist.length != 0) {
                for (let k = 0; k < zplist.length; k++) {
                  zplist[k].IMG = that.host.filehost + zplist[k].ID;
                }
              }
            }
            that.listdata = that.listdata.concat(data.data);
            console.log(that.listdata, "that.listdata");
          } else {
            //没数据
            that.nextapi = false;
          }
        } else {
          that.Toastfn(data.msg, 2000, "");
        }
        that.loading = false; //关闭loading
      });
    },
    // 提示函数
    Toastfn(message, duration, position) {
      Toast({
        message: message,
        duration: duration,
        position: position
      });
    }
  },
  created() {
    // ----------------
    //加载微信sdk
    api.getWxJsSdkConfig(this, res => {
      let data_res = JSON.parse(res.data.data);
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: data_res.appId, // 必填，公众号的唯一标识
        timestamp: data_res.timestamp, // 必填，生成签名的时间戳
        nonceStr: data_res.nonceStr, // 必填，生成签名的随机串
        signature: data_res.signature, // 必填，签名
        jsApiList: [
          // 'onMenuShareTimeline',
          "onMenuShareAppMessage"
        ]
      });
    });
    // ------------------
  },
  mounted() {
    let that = this;
    var userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
    this.openid = userinfo.openid;
    if (userinfo && userinfo.vipcode) {
      let userid = userinfo.vipcode;
      this.userid = userid;
    }
    this.getqjset(that, this.userid); //获取全局设置信息
    this.$emit("footnavzt", true); //显示底部导航
    localStorage.setItem("footnavselected", 0);
  },
  // 切换页面关闭定时器
  destroyed() {
    if (this.timer) {
      //如果定时器在运行则关闭
      clearInterval(this.timer);
    }
  }
};
</script>

<style scoped lang="less">
li {
  list-style: none;
}
// 图片占位
.imgzanwei {
  height: 300px;
}
.contantbox {
  padding: 0.2rem;
  padding-bottom: 88px;
  .djs {
    line-height: 0.7rem;
    font-size: 0.32rem;
    border-radius: 0.1rem;
    background: rgba(0, 0, 0, 0.25);
    text-align: center;
    color: #ffffff;
  }
  .bmrs {
    margin: 0.4rem 0.7rem 0.4rem;
    ul {
      display: flex;
      justify-content: center;
      li {
        flex: 1;
        color: rgb(138, 92, 255);
        text-align: center;
        font-size: 0.36rem;
        text-shadow: rgb(255, 255, 255) -1px -1px 0px,
          rgb(255, 255, 255) 0px -1px 0px, rgb(255, 255, 255) 1px -1px 0px,
          rgb(255, 255, 255) 1px 0px 0px, rgb(255, 255, 255) 1px 1px 0px,
          rgb(255, 255, 255) 0px 1px 0px, rgb(255, 255, 255) -1px 1px 0px,
          rgb(255, 255, 255) -1px 0px 0px;
        p {
        }
      }
      li:first-child {
        border-right: 1px solid #cccccc;
      }
    }
  }
  .search {
    line-height: 0.7rem;
    font-size: 0.32rem;
    border-radius: 0.1rem;
    background: rgba(0, 0, 0, 0.25);
    text-align: left;
    padding: 0 10px;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;

    input {
      background-color: transparent;
      border: 0;
      height: 20px;
      line-height: 20px;
      color: #ffffff;
      font-size: 0.32rem;
      width: 90%;
    }
    ::-webkit-input-placeholder {
      /* WebKit browsers */
      color: #ffffff;
      font-size: 0.32rem;
    }
  }
  .contantlist {
    background-color: #ffffff;
    margin-top: 0.4rem;
    min-height: 350px;

    .nav {
      border-bottom: 1px solid #f1f1f1;
      ul {
        display: flex;
        li {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 50px;
          color: #666666;
          p {
          }
        }
      }
    }
    .list {
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      padding: 0.1rem;
      .item {
        width: 50%;
        padding: 0.1rem 0.1rem 0.3rem 0.1rem;
        box-sizing: border-box;
        text-align: center;
        p.bh {
          background-color: #6baaff;
          height: 30px;
          line-height: 30px;
          color: #ffffff;
        }
        p.tp {
          width: 100%;
          height: 3.2rem;
          overflow: hidden;
          background-size: cover;
          background-position: center center;
          img {
            width: 100%;
            // height: 3.0rem;
          }
        }
        p.bt {
          padding: 0.1rem;
          font-size: 0.32rem;
          color: #666666;
        }
        p.ps {
          font-size: 0.32rem;
          color: #ffad32;
          padding-bottom: 0.1rem;
        }
      }
    }
  }
}
.loading {
  text-align: center;
  padding-bottom: 20px;
  color: #666666;
}
.navbaricon {
  i {
    margin-right: 0.05rem;
    font-size: 0.36rem;
  }
}
</style>
